<template>
    <div class="root">
        <div class="container">
            <div class="timecontainer">
                <p>今日已学习{{time}}分钟</p>
                <p>目标：<span contenteditable="true" ref="task" @keyup="settask" @blur="settask">...</span></p>
            </div>
            <button ref="starts" @click="tostudy">Start</button>
        </div>
        <div ref="tag" class="tag">
            <div class="nav">
                <div class="down fa fa-angle-double-down fa-2x" @click="down"></div>
                <router-link to="/home/maillist/studymyself">学习计时</router-link>
                <router-link to="/home/maillist/toroom">进入房间</router-link>
            </div>
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            time:0
        }
    },
    computed:{
        gettime:function(){
            const msg = window.sessionStorage.getItem('task')
            // console.log(msg)s
            return msg
        }
    },
    methods:{
        tostudy(e){
            // alert('开始')
            this.$router.push('/home/maillist/studymyself')
            this.$refs.tag.style.bottom = '0px'
            e.target.style.display = 'none'
        },
        down(e){
            this.$refs.tag.style.bottom = '-280px'
            setTimeout(()=>{
                this.$refs.starts.style.display = 'flex'
            },500)
        },
        settask(e){
            const msg = e.target.innerText
            if(e.type === 'blur'){
                window.sessionStorage.setItem('task',msg)
            }
        }
    },
    mounted(){
        // console.log(this.$refs.task)
        this.$refs.task.innerHTML = this.gettime
        this.time = window.sessionStorage.getItem('hasstudy')
    }
}
</script>

<style lang="less" scoped>
    .root{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }
    .container{
        width: 100vw;
        height: 100%;
        // border: 1px solid #ccc;
        background: url('../assets/img/a1.jpg') center center no-repeat;
        background-size: cover;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .timecontainer{
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        width: 100%;
        // height: 50px;
        // background-color: #3498db;
        margin-top: 130px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color:rgb(255, 245, 239);
        p:nth-child(1){
            font-size: 21px;
        }
        p:nth-child(2){
            font-size: 16px;
            margin-top: 10px;
        }
    }
    button{
        width: 100px;
        height: 40px;
        margin-top: 130px;
        background:none;
        background-color: #e67e22;
        outline: none;
        font-size: 22px;
        text-transform: uppercase;
        border: none;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center; 
        border-radius: 10px;
        box-shadow: -5px 5px 10px #ccc;
        color: rgb(255, 245, 239);
        transition: .5s all ease-in-out;
        animation: star 1s linear infinite alternate-reverse;
    }
    @keyframes star{
        to{
            opacity: .5;
            box-shadow: 0 0 5px #ccc;
        }
    }
    .tag{
        width: 100%;
        height: 40%;
        // background-color: skyblue;
        position: absolute;
        bottom: -280px;
        transition: .5s all ease-in-out;
    }
    .nav{
        width: 100%;
        height: 18%;
        display: flex;
        justify-content: center;
        // background-color: rgb(221, 226, 232);
        border-top-right-radius: 15px;
        border-top-left-radius: 15px;
        position: relative;
        .down{
            position: absolute;
            // width: 50px;
            // height: 50px;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            top: -100%;
            color: #fff;
            // background:radial-gradient(at center, rgb(0, 129, 248),rgb(0, 200, 236)) ;
            // background-color: rosybrown;
        }
        a{
            display: inline-block;
            width: 50%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: rgb(220, 225, 231);
            border-top-left-radius: 15px;
            border-top-right-radius: 15px;
            overflow: hidden;
            text-decoration: none;
            color:rgb(162, 174, 190);
        }
        .router-link-active{
            color: rgb(82, 81, 112);
            background-color: rgb(247, 248, 252);
        }
    }
</style>
